<section class="content-header">
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
        <li><a href="#">权限管理</a></li>
        <li class="active">用户管理</li>
    </ol>
</section>

<section class="content">
    <div class="jax-box">
        <form id="selectForm" class="form-inline" th:action="@{/user/list}">
            <div class="form-group">

                <div class="form-group">
                    <label class="control-label">用户名：</label>
                    <div class="control-inline">
                        <input type="text" name="userName" class="form-control width-90" />
                    </div>
                </div>

                <shiro:hasPermission name="user:list">
                    <div class="btn-group btn-group-sm" style="text-align:left;">
                        <button type="button" id="btn_query" class="btn btn-info">查询</button>
                        <button type="reset" id="btn_reset" class="btn btn-warning">重置</button>
                    </div>
                </shiro:hasPermission>
            </div>
        </form>
    </div>
    <div class="jax-box jax-box-table">
        <div id="toolbar" class="toolbar btn-group">
            <shiro:hasPermission name="user:add">
                <button id="btn_add" type="button" class="btn btn-primary" data-toggle="modal" data-target="#userModal">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
                </button>
            </shiro:hasPermission>
            <shiro:hasPermission name="user:batchDelete">
                <button id="btn_batch_delete" type="button" class="btn btn-danger">
                    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>批量删除
                </button>
            </shiro:hasPermission>
        </div>


        <div class="wrapper-content">
            <div class="ibox-content animated fadeInRight">
                <div class="jqGrid_wrapper">
                    <table id="table_list"></table>
                    <div id="pager_list"></div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 用户新增模态框 -->
<div id="userModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog"  role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">新增用户</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="userForm">
                    <div class="box-body">
                        <div class="form-group">
                            <label  class="col-sm-3 control-label">用户名 <span style="color: red">*</span>:</label>
                            <div class="col-sm-8">
                                <input  name="userName" class="form-control" min="3" require="必填项"  placeholder="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label  class="col-sm-3 control-label">密码 <span style="color: red">*</span>:</label>
                            <div class="col-sm-8">
                                <input name="password" type="password" class="form-control"  min="3" require="必填项"  placeholder="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label  class="col-sm-3 control-label">确认密码 <span style="color: red">*</span>:</label>
                            <div class="col-sm-8">
                                <input name="confirmPwd" type="password" class="form-control"  min="3" require="必填项"  placeholder="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label  class="col-sm-3 control-label">邮箱 :</label>
                            <div class="col-sm-8">
                                <input name="email" class="form-control" placeholder="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label  class="col-sm-3 control-label">电话 :</label>

                            <div class="col-sm-8">
                                <input name="mobile" class="form-control" placeholder="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label  class="col-sm-3 control-label">性别 :</label>
                            <div class="col-sm-8">
                                <select name="ssex" class="form-control">
                                    <option value="0">请选择</option>
                                    <option value="1">男</option>
                                    <option value="2">女</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="box-footer">
                        <div class="pull-right">
                            <button type="button" id="saveUser" class="btn btn-info">确定</button>
                            <button type="button" data-dismiss="modal" class="btn btn-default">取消</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 用户详情模态框 -->
<div id="userDetailModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">用户信息</h4>
            </div>
            <div class="modal-body">
                <div id="userOpenWindow">
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 分配角色模态框 -->
<div id="assignRoleModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">分配角色</h4>
            </div>
            <div class="modal-body">
                <table id="assignRoleTable">
                </table>
            </div>
            <div class="modal-footer">
                <div class="pull-right">
                    <button type="button" id="saveAssign" class="btn btn-info">确定</button>
                    <button type="button" data-dismiss="modal" class="btn btn-default">取消</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    var userIdChecked;
    var selectRoleIds;
    var loadRoleCount=0;

    $(document).ready(function () {
        var editFlag = "[[${@perms.hasPerm('user:edit')}]]";
        var deleteFlag = "[[${@perms.hasPerm('user:delete')}]]";
        var assignRoleFlag = "[[${@perms.hasPerm('user:assignRole')}]]";

        var dataGrid = new DataGrid({
            dataGrid: $('#table_list'),
            searchForm: $('#selectForm'),
            dataGridPage: $('#pager_list'),
            rownumbers: true,
            rownumWidth: 60,
            colModel: [
                {
                    header: 'ID',
                    name: 'userId',
                    index: 'userId',
                    editable: false,
                    width: 40,
                    align: 'center',
                    sortable: false,
                    search: false
                },
                {
                    header: '用户名',
                    name: 'userName',
                    index: 'userName',
                    width: 30,
                    sortable: false,
                    align: 'center'
                },
                {
                    header: '邮箱',
                    name: 'email',
                    index: 'email',
                    width: 30,
                    align: 'center',
                    sortable: false
                },
                {
                    header: '用户状态',
                    name: 'status',
                    index: 'status',
                    width: 30,
                    align: 'center',
                    sortable: false,
                    formatter: function (cellValue, options, rowObject) {
                        if (1==cellValue) {
                            return "启用";
                        } else {
                            return "停用";
                        }
                    }
                },
                {
                    header: '最后登录时间',
                    name: 'lastLoginTime',
                    index: 'lastLoginTime',
                    width: 30,
                    align: 'center',
                    sortable: false
                },
                {
                    header: '操作',
                    index: 'operate',
                    width: 80,
                    align: "center",
                    sortable: false,
                    formatter: function (cellvalue, options, rowObject) {
                        /*var edit = editFlag=="true"? '<a class="table-btn table-btn-info" href="javascript:void(0)" onclick="editUser('+rowObject.userId+')">编辑</a>' : '';
                        var assign = assignRoleFlag=="true"? '<a class="table-btn table-btn-info"  href="javascript:void(0)" onclick="assignRoleList('+rowObject.userId+')">分配角色</a>':'';
                        var del = deleteFlag=="true"  ?  '<a  class="table-btn table-btn-danger" href="javascript:void(0)" onclick="deleteUser('+rowObject.userId+')">删除</a>' : '';*/

                        var edit = '<a class="table-btn table-btn-info" href="javascript:void(0)" onclick="editUser('+rowObject.userId+')">编辑</a>' ;
                        var assign = '<a class="table-btn table-btn-info"  href="javascript:void(0)" onclick="assignRoleList('+rowObject.userId+')">分配角色</a>' ;
                        var del = '<a  class="table-btn table-btn-danger" href="javascript:void(0)" onclick="deleteUser('+rowObject.userId+')">删除</a>';
                        return edit + assign + del;
                    }
                }
            ]
        });

        //加载表格
        $("#btn_query").click(function () {
            $("#table_list").jqGrid('setGridParam', {
                datatype: 'json',
                postData: {
                    userName: $('input[name=userName]').val()
                }, // 发送数据
                page: 1
            }).trigger("reloadGrid"); //重新载入

        })


        /*保存用戶*/
        $("#saveUser").click(function(){
            if(doValidForm(userForm)){
                Core.mask("#saveUser");
                Core.postAjax(ctxPath + "/user/add",$("#userForm").serialize(),function (data) {
                    Core.unmask("#saveUser");
                    if(data.code==200){
                        $("#userModal").modal("hide");
                        $("#userForm")[0].reset();
                        //Core.refreshTable("#table")
                        Core.refreshJqTable("#table_list");
                    }
                    layer.msg(data.msg);
                })
            };
        });

        /*分配角色保存*/
        $("#saveAssign").click(function () {
            var checkedRows= Core.selectMutiData("#assignRoleTable");
            if(checkedRows){
                Core.mask("#saveAssign");
                roleIdStr="";
                $.each(checkedRows, function (i, item) {
                    roleIdStr+=(item.roleId+",");
                })
                roleIdStr=roleIdStr.substring(0,roleIdStr.length-1);
                Core.postAjax(ctxPath + '/user/assign/role',{userId:userIdChecked,roleIdStr:roleIdStr},function (data) {
                    Core.unmask("#saveAssign");
                    if(data.code==200){
                        $("#assignRoleModal").modal("hide");
                    }
                    layer.msg(data.msg);
                })
            }
        })

    });

    /*编辑*/
    function editUser(userId) {
        Core.load("#userOpenWindow",ctxPath + "/user/edit?userId="+userId,function(){
            $("#userDetailModal").modal("show");
        },2);
    }

    /*删除*/
    function deleteUser(userId) {
        Core.confirm("确定删除该用户？",function () {
            Core.postAjax(ctxPath + "/user/delete",{"userId":userId},function (data) {
                if(data.code==200){
                    Core.refreshJqTable("#table_list");
                }
                layer.msg(data.msg);
            },"get")
        })
    }

    /*查询角色参数*/
    function queryRoleParams(params){
        var temp = {
            userId :userIdChecked
        };
        return temp;
    }

    /*分配角色-列表查询*/
    function assignRoleList(userId) {

        userIdChecked=userId;
        $("#assignRoleModal").modal("show");
        if(loadRoleCount==0){
            var roleColumns=[
                {checkbox: true },
                {
                    field: 'roleId',
                    title: '角色ID',
                    align : "center"
                }, {
                    field: 'roleName',
                    title: '角色名称',
                    align : "center"
                }, {
                    field: 'remark',
                    title: '角色描述',
                    align : "center"
                },
                {
                    field: 'status',
                    title: '角色状态',
                    align : "center",
                    formatter:function(value,row, index) {
                        return row.status == '1' ? "有效" : "删除";
                    }
                }];
            console.log(userId);
            var roleOptions={
                id:"#assignRoleTable",
                url: ctxPath + "/user/assign/role/list",
                columns:roleColumns,
                pagination : false,
                queryParams : queryRoleParams,
                onLoadSuccess: function(){  //加载成功时执行
                    loadRoleCount=1;
                    var array = [];
                    array.push(parseInt(selectRoleIds));
                    Core.checkTableBy("#assignRoleTable",{field:"roleId", values:array});
                },
                responseHandler : handleRoleData,
            }
            Core.initTable(roleOptions);

        }
        if(loadRoleCount==1){
            Core.refreshTable("#assignRoleTable");
        }

    }

    /*处理角色数据*/
    function handleRoleData(res){
        selectRoleIds = res.hasRoles;
        return res.rows;
    }

</script>